'use strict'
import { App, ListView, View } from '../../../component'
import style from './css.css'
import Item from './item'
import setTitle from '../../../config/setTitle'
import { observer, inject } from 'mobx-react'

@inject('user') @observer class Message extends React.Component {
  static propTypes = {
    user: PropTypes.object,
    history: PropTypes.object
  }

  componentDidMount () {
    setTitle('消息中心')
    this.props.user.getMessages()
  }

  _renderList () {
    const messages = this.props.user.messages
    if (messages.length > 0) {
      return (
        <ListView
          className={style.listView}
          layoutClassName={style.layoutClassName}
          dataSource={messages}
          Item={Item}
          itemProp={{ history: this.props.history }}
          ItemKey={'comment_id'}
          topRefresh={(cb) => { this.props.user.getMessages(cb) }}
        >
        </ListView>
      )
    }
    else {
      return (
        <View className={style.messageTipWrapper}>
          <View className={style.messageTipNo}>
            暂无消息记录
          </View>
        </View>
      )
    }
  }

  render () {
    return (
      <App noSysScroll={false}>
        <View className={style.messageWrapper}>
          {this._renderList()}
        </View>
      </App>
    )
  }
}

export default Message
